<template>
  <t-dialog
    :visible="props.visible"
    header="新建文章资源"
    attach="body"
    :confirm-on-enter="true"
    :on-close="closes"
    :on-confirm="onConfirmAnother"
  >
    <template #body>
      <t-form ref="form" class="item-containers" :data="formData" :rules="FORM_RULES" label-width="100px">
        <t-row :gutter="16">
          <t-col :span="12">
            <t-form-item label="文章名称" name="name">
              <t-input v-model="formData.title" placeholder="请输入文章标题"></t-input>
            </t-form-item>
          </t-col>
          <t-col :span="6">
            <t-form-item label="文章类型">
              <t-select>
                <t-option key="apple" label="Apple" value="apple" />
              </t-select>
            </t-form-item>
          </t-col>
          <t-col :span="6">
            <t-form-item label="作者">
              <t-input v-model="formData.name" placeholder="如：公元前475年"></t-input>
            </t-form-item>
          </t-col>
          <t-col :span="12">
            <t-form-item label="摘要" name="gender">
              <t-textarea placeholder="请输入文章摘要" />
            </t-form-item>
          </t-col>
          <t-col :span="12">
            <t-form-item label="文章描述" name="gender">
              <DydEditor></DydEditor>
            </t-form-item>
          </t-col>
        </t-row>
      </t-form>
    </template>
    <template #footer>
      <footerBtn :loading="loading" @btnOk="onConfirmAnother" @btnClose="closes" submitTitle="确定" closeTitle="取消" />
    </template>
  </t-dialog>
</template>
<script setup lang="ts">
// @ts-nocheck
import DydEditor from '@/components/RichText/Editor.vue';
import md5 from 'js-md5';
import { ref, reactive } from 'vue';
import { MessagePlugin } from 'tdesign-vue-next';
import footerBtn from '@/components/footer/footerBtn.vue';
import type { FormInstanceFunctions, FormRule } from 'tdesign-vue-next';
import { useCounter } from '@/hooks';
import { accountReplace } from '@/api/user/user';
import { Usertype } from '@/api/model/login';
const [countDown, handleCounter] = useCounter();

const type = ref('password');
const FORM_RULES: Record<string, FormRule[]> = {
  phone: [{ required: true, message: '请输入信息', type: 'error' }],
  newPhone: [{ required: true, message: '请输入信息', type: 'error' }],
  verifyCode: [{ required: true, message: '请输入验证码', type: 'error' }],
  email: [{ required: true, message: '请输入邮箱', type: 'error' }],
  password: [{ required: true, message: '请输入原密码', type: 'error' }],
  newpassword: [{ required: true, message: '请输入新密码', type: 'error' }],
};
const loading = ref(false);
const form = ref<FormInstanceFunctions>();
const formData = reactive({
  title: '',
});
const props = defineProps({
  visible: {
    type: Boolean,
  },
  info: {
    type: Object,
  },
});
if (props.info) {
  // formData.value.phone = props.info.phone;
  // formData.value.email = props.info.email;
}
const emit = defineEmits(['submit', 'close']);
const onConfirmAnother = async (context: any): void => {
  try {
    if (loading.value) {
      return;
    }

    let parmas: Usertype = {
      type: 3,
      newData: formData.value.newPhone,
      oldData: formData.value.phone,
    };
    if (props.title == '设置邮箱') {
      parmas = {
        type: 4,
        newData: formData.value.newEmail,
        oldData: formData.value.email,
      };
    } else if (props.title == '设置密码') {
      parmas = {
        type: 5,
        newData: formData.value.newpassword ? md5(formData.value.newpassword) : '',
        oldData: formData.value.password ? md5(formData.value.password) : '',
      };
    }
    if (!parmas.newData) {
      MessagePlugin.error({ content: '请完善信息', duration: 2500 });
      return;
    }
    if (props.info.phone || props.info.email || props.info.isPassword) {
      if (!parmas.oldData) {
        MessagePlugin.error({ content: '请完善信息', duration: 2500 });
        return;
      }
    }
    loading.value = true;
    let res = await accountReplace(parmas);
    if (res.statusCode == 200) {
      emit('submit');
    }

    loading.value = false;
  } catch {
    loading.value = false;
  }

  //  设置手机号
  // 设置邮箱
  // 设置密码
  // console.log('点击了确认按钮', context);
};

const sendCode = () => {
  form.value.validate({ fields: ['phone'] }).then((e) => {
    if (e === true) {
      handleCounter();
    }
  });
};
const closes = (context: any): void => {
  emit('close', false);
};
</script>

<style lang="less" scoped>
.item-containers {
  padding: 0 0 0 2%;
  width: 95%;
}
.t-col {
  margin-top: 18px;
}
</style>
